/************    将 vuex管理 抽取成一个模块    ************/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

/** 组件注册完以后去本地存储查看是否有历史数据遗留 **/
const cart = window.JSON.parse( localStorage.getItem('cart') || "[]" );

/** 细节点: 在创建实例之前必须得有 Vue.use(Vuex) 注册组件, 否则会报错 **/
const store = new Vuex.Store({
    /* 相当于一个全局的data对象 */
    state: {
        cart: cart,  // 存储购物车的数据
    },
    /* 相当于一个修改state数据的方法对象 */
    mutations: {
        /* 将商品添加到购物车数据的方法 */
        addToCar(state, data){
            /* 标记, 默认表示: 不存在 */
            let flag = false;
            /* 遍历 cart 数组, 来判断当前传入的数据中是否在数组中存在 */
            state.cart.some(item => {
                /* 商品的id相同, 那么就修改标记, 并退出遍历 */
                if( item.id == data.id ){
                    /* 将数量增加 */
                    item.count += data.count;
                    flag = true;
                    return true;
                }
            });
            /* 通过判断标记的值, 来进行后续的操作 */
            if( !flag ) state.cart.push(data);

            /* 将数据存储到浏览器的本地存储中 localStorage */
            localStorage.setItem('cart', window.JSON.stringify(state.cart));
        },
        /* 修改购物车中的数量数据, 将数据同步 */
        updateCar(state, data){
            state.cart.some(item => {
                if( item.id == data.id ){
                    item.count = data.count;
                    return true;
                }
            });

            /* 将数据存储到浏览器的本地存储中 localStorage */
            localStorage.setItem('cart', window.JSON.stringify(state.cart));
        },
        /* 修改商品选中的状态 */
        updateSwitch(state, data){
            state.cart.some(item => {
                if( item.id == data.id ){
                    item.switch = data.switch;
                    return true;
                }
            });

            /* 将数据存储到浏览器的本地存储中 localStorage */
            localStorage.setItem('cart', window.JSON.stringify(state.cart));
        },
        /* 删除对应商品的数据 */
        delGoodsById(state, id){
            state.cart.some((item, i) => {
                if( item.id == id ){
                    state.cart.splice(i, 1);
                    return true;
                }
            });

            /* 将数据存储到浏览器的本地存储中 localStorage */
            localStorage.setItem('cart', window.JSON.stringify(state.cart));
        }
    },
    /* 相当于一个computer属性, 只用来获取数据, 以及对数据格式的操作 */
    getters: {
        /* 获取购物车总数的方法 */
        getCartCount(state){
            /* 遍历数组, 获取加和总数 */
            let count = 0;
            state.cart.forEach(item => count += item.count );
            return count;
        },
        /* 获取购物车中的ids字符串, 用来请求数据 */
        idsStr(state){
            let arr = [];
            state.cart.forEach(item => arr.push(item.id));
            return arr.join(",");
        },
        /* 商品数量对象: 将cart数组转化为更简单的对象{id:count} */
        countObj(state){
            let obj = {};
            state.cart.forEach(item => obj[item.id] = item.count);
            return obj;
        },
        /* 开关状态对象: 将cart数组转化为更简单的对象{id:switch} */
        switchObj(state){
            let obj = {};
            state.cart.forEach(item => obj[item.id] = item.switch);
            return obj;
        },
        /* 计算已勾选的商品件数 */
        totalCount(state){
            let total = 0;
            state.cart.forEach(item => {
                /* 判断是否是选中状态 */
                if( item.switch )
                    total += item.count;
            });
            return total;
        },
        /* 计算已勾选商品的总价格 */
        totalPrice(state){
            let total = 0;
            state.cart.forEach(item => {
                /* 判断是否是选中状态 */
                if( item.switch )
                    total += item.count * item.price;
            });
            return total;
        }

    }
})

/** 将改对象暴露 **/
export default store